<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { postTagGrouplist, postTagAddtag } from '@/api'

//获取群标签列表接口信息
const tangList = ref([])
const countList = ref([])
const currentPage = ref(1) //页码
const pageSize = ref(10) //	条数
const GroupTag = () => {
	postTagGrouplist({
		page: currentPage.value,
		size: pageSize.value
	}).then((res) => {
		tangList.value = res.data.item
		countList.value = res.data
	})
}
GroupTag()

const router = useRouter()

// 显示/不显示
const changeStatus = (index) => {
	// 所有不显示
	tangList.value.map((item) => {
		item.isShow = false
	})
	// 点谁谁显示
	tangList.value[index].isShow = true
}
// 输入获取值
const inputEnter = (item, index) => {
	console.log(item, index)
	if (item.value.replace(/(^\s*)|(\s*$)/g, '') == '') {
		console.log('为空')
	} else {
		postTagAddtag({
			group_id: item.id,
			tag_name: item.value
		}).then((res) => {
			tangList.value[index].tag_info.push(res.data)
			console.log('获取到的值', tangList.value)
		})
		// item.value = ''
		item.isShow = false
	}
}
const editGo = (id) => {
	router.push({ path: 'addGroupLabelGroup', query: { id: id } })
}
const change = (id) => {
	router.push({ path: 'addLabelGroup', query: { id: id } })
}
</script>
<template>
	<div class="CMtopStyleChildOne">
		<div @click="change">
			<el-button type="primary">添加标签组</el-button>
		</div>
		<div></div>
	</div>

	<!-- 正文 -->
	<div class="public-container">
		<div class="public-header-container">共{{ countList.count }}条素材</div>
		<div v-for="(item, index) in tangList" :key="index">
			<div class="centerContentStyleChild2">
				<div style="color: #222222">
					<p style="font-weight: bolder">{{ item.name }}</p>
					<p style="margin-top: 17px; color: #666">共{{ item.tag_info.length }}个标签</p>
				</div>
				<div class="contentChild1">
					<div class="listUpDownEdit">
						<div>可见范围：全部员工可用</div>
						<div class="listUpDownEditChild">
							<div @click="editGo(item.id, 1)"><i class="iconfont">&#xe8ac;</i>修改</div>
						</div>
					</div>
					<div class="contentTag">
						<div style="margin-right: 11px">
							<el-button @click="changeStatus(index)">
								<el-icon> <Plus /> </el-icon>添加
							</el-button>
						</div>
						<div style="margin-right: 11px">
							<el-input
								:clearable="true"
								@keyup.enter="inputEnter(item, index)"
								v-model="item.value"
								v-show="item.isShow"
							>
							</el-input>
						</div>
						<div>
							<!-- 添加的标签 -->
							<el-tag
								style="margin-left: 11px; margin-bottom: 10px"
								size="large"
								type="info"
								v-for="tag_info in item.tag_info"
								:key="tag_info"
								>{{ tag_info.name }}
							</el-tag>
						</div>
					</div>
				</div>
			</div>
			<div style="border-bottom: 1px dashed #e8e8e8; margin: 0 20px"></div>
		</div>
	</div>
</template>
<style scoped>
@import '../../../style/iconfont.css';

.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
}
.CMtopStyle {
	position: relative;
	display: flex;
	justify-content: flex-start;
	margin: 20px;
	height: 84px;
	line-height: 84px;
	border-radius: 8px;
	background-color: #ffffff;
}

.CMtopStyleChildOne {
	display: flex;
	margin: 20px 20px 0 20px;
	justify-content: space-between;
}

.topStyleChild1 {
	margin-left: 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.searchStyle {
	display: flex;
	margin-left: 50px;
}

.searchStyleChild {
	margin-left: 5px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: -25px;
}

.ResetStyle {
	position: absolute;
	right: 3%;
}

/* 正文 */
.centerContentStyle {
	position: relative;
	margin: 20px 20px 0 20px;
	border-radius: 8px;
	height: 651px;
	background-color: #ffffff;
}

.centerContentStyleChild1 {
	height: 62px;
	line-height: 62px;
	margin: 0 0 0 21px;
	border-bottom: 1px solid #ececec;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: bolder;
	border-bottom: 1px solid #ececec;
}

.centerContentStyleChild2 {
	min-height: 108px;
	margin-left: 20px;
	margin-top: 17px;
	display: flex;
	justify-content: flex-start;
}

.contentChild1 {
	width: 76%;

	margin-left: 76px;
}

.listUpDownEdit {
	display: flex;
	justify-content: space-between;
}

.listUpDownEditChild {
	position: absolute;
	right: 3%;
	display: flex;
	justify-content: space-between;
	color: #1890ff;
}

/* 标签 */
.contentTag {
	display: flex;
	justify-content: flex-start;
	margin-top: 17px;
}

/* 弹窗 */
.dialogStyle {
	display: flex;
	justify-content: space-between;
}
/* table */
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 0 0 0;
	border-radius: 10px;
	font-size: 14px;
}
.public-header-container {
	margin: 0 20px 20px 20px;
	padding-bottom: 16px;
	font-size: 15px;
	color: #222;
	font-weight: bold;
	border-bottom: 1px solid #ececec;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
/* 功能区 */
.table-operation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	margin: 20px 20px 0 20px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-right {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-label {
	/* width: 110px; */
	margin-right: 10px;
}
</style>
